<template>
  <div class="comment">
    <ul class="comment-ul">
      <li class="comment-li" v-for="item in commentDtoList" :key="item.orderNo">
        <div class="icon">
          <!-- <img v-if="guide.iconUrl == null || guide.iconUrl == ''" src="static/img/server/usericon.png"  /> -->
          <img src="static/img/server/usericon.png" />
          <!-- <img v-else :src="$platIMG + guide.iconUrl" /> -->
        </div>
        <div class="body">
          <div class="creator">
            <span>zhangsan</span>
          </div>
          <p
            class="text"
          >品论内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
          <div class="time">2020-9-12</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      commentDtoList: [
        {
          id: 1,
          userId: "me",
          userName: "zhangsan",
          gmtCreate: "20202020",
          remark: "123123123"
        }
      ]
    };
  },
  mounted() {
    // this.getCommentList();
    // console.log(this.textarea);
  },
  methods: {
    getCommentList() {
      this.$axios
        .post("/life/staff/commentList", {
          staffId: this.$route.params.staffId
        })
        .then(res => {
          if ((res.data.status = 200)) {
            console.log(res.data);
            this.commentDtoList = res.data.data.rows;
          }
        });
    },
    addComment() {
      this.$axios
        .post("/life/staff/addComment", {
          grade: "5",
          // operator: "",
          orderNo: this.$route.params.orderNo,
          remark: this.$refs.textarea.value
        })
        .then(res => {
          if ((res.data.status = 200)) {
            console.log(res.data);
            Toast({
              message: "评论发表成功",
              // position: "bottom",
              duration: 5000
            });
            this.$router.push("/order");
            document.getElementById("orderTab").className +=
              " router-link-exact-active mui-active";
          }
        });
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/modifyMintUIColor.styl';

.comment {
  .comment-ul {
    .comment-li {
      display: flex;

      .icon {
        width: 0.9rem;
        height: 0.9rem;
        border-radius: 0.45rem;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .body {
        flex: 1;

        .creator {
          padding: 0 0.2rem;
          color: $themeColor;
        }

        .text {
          padding: 0.2rem 0;
          margin-left: 0.2rem;
        }

        .time {
          padding: 0 0.2rem 0.2rem 0;
          margin-left: 0.2rem;
          color: #999;
          border-bottom: 1px solid #ccc;
        }
      }
    }
  }

}
</style>